<template>
  <div class="app-container">
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="物料查询" name="MaterialQuery">
        <MaterialQuery />
      </el-tab-pane>
      <el-tab-pane label="物料类别" name="MaterialInput" v-if="isShowType()">
        <MaterialInput />
      </el-tab-pane>
      <el-tab-pane label="隐藏管理" name="MaterialHideMgr" v-if="isShowType()">
        <MaterialHideMgr />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import MaterialInput from "./materiaInput";
import MaterialQuery from "./materialQuery";
import MaterialHideMgr from "./materialHideMgr"
import { checkPermi } from '../../utils/permission'

export default {
  components: { MaterialInput,  MaterialQuery, MaterialHideMgr},
  created() {
    this.productTypeId = this.$route.query.id; // 获取查询参数
  },
  data() {
    return {
      key: 0,
      activeName: "MaterialQuery",
      currentTab: "",
      isAdmin: 0,
    };
  },
  methods: {
    handleClick(tab, event) {
      //切换标签页 刷新表格
      if (this.currentTab != tab.name) {
        this.currentTab == tab.name;
        this.key++;
      }
    },
    isShowType(){
      if(checkPermi(['mc:material:mgr'])) return true;
      return false;
    },
  },
};
</script>
<style scoped>
.app-container {
  padding-top: 12px;
}
/*.app-container::v-deep .el-tabs__header {*/
/*  height: 40px;*/
/*}*/
.app-container::v-deep .el-tabs__item {
  font-size: 14px;
  font-weight: 600;
}

/**悬浮 */
.app-container::v-deep .el-tabs__item:hover {
  cursor: pointer;
  opacity: 1;
}

/*去下划线 */
.app-container::v-deep .el-tabs__nav-wrap::after {
  position: static !important;
}

</style>
